<template>
    <div id="ssqMenage">
        <table>
            <tr>
                <th>期号</th>
                <th>开奖日期</th>
                <th>中奖号码</th>
            </tr>
            <tr v-for="(item,key) in ssqData.data" :key="key"
            @click="showMissNum(item,key,$event)">
                <td>{{item.period}}</td>
                <td>222</td>
                <td>
                    <span v-for="(num,index) in item.winnerNumber" :key="index">
                        {{num}}
                    </span>
                </td>
            </tr>
            <transition name="fade">
                <tr v-show="show" ref="insertcell">
                    <td colspan="3">
                        <ul>
                            <li>
                                <span>号码：</span>
                                <span v-for="(item,key) in 49" :key="key">{{item<=33?item:(item-33)}}</span>
                            </li>
                            <template v-if="missNumber.general.length">
                            <li>
                                <span>遗失次数：</span>
                                <span v-for="(item,key) in missNumber.general" :key="key">{{item}}</span>
                            </li>
                            </template>
                        </ul>
                    </td>
                </tr>
            </transition>
        </table>
        <el-pagination
            layout="prev, pager, next"
            @current-change='loadMore'
            :total=total>
        </el-pagination>
    </div>
</template>
<script>
export default {
  data() {
        return {
            ssqData:[],
            show:false,
            total:1,
            preSelect:100,
            missNumber:{general:[]}
        }
    },
    methods:{
        loadMore(num){
            this.show=false;
            this.loadData(10,num)
        },
        loadData(pageSize,pageNo){
            this.$http.get(this.$apis.onegamesInfo,{gameName:'ssq',pageSize:pageSize,pageNo:pageNo})
           .then((resp)=>{
                console.log(resp)
                console.log(resp.data.data)
                this.ssqData = resp.data.data;
                this.total = resp.data.data.total;
           })
        },
        showMissNum(item,index,event){
            console.log("hsigah")
            if(index == this.preSelect && this.show){
                this.show = false;
                return;
            }
            this.missNumber = item.missNumber;
            console.log(item)
            this.show = true;
            this.preSelect = index;
            this.insertAfter(event.target.parentElement,this.$refs.insertcell)
        },
        insertAfter(target,newElement){
            if(target.newElementSibling){
                var rs = target.parentElement.insertBefore(newElement,target.newElementSibling)
            }else{
                console.log(target)
                target.parentElement.appendChild(newElement)
            }
        }
    },
    mounted(){
        //  this.$store.dispatch('loadssqinfo')
        this.loadData(10,0)
        
    }
}
</script>
<style lang="scss" scoped>
#ssqMenage {
    position: absolute;
    left: 199px;
    right: 0;
    top: 60px;
    bottom: 0;
    background: white;
}
table{
    width: 100%;
    border: 1px solid #cccccc;
    margin: auto;
    th{
        border-right: 1px solid #cccccc
    }
    tr{
        width: 100%;
        height: 50px;
        border-bottom:1px solid #cccccc;
        &:hover{
            background:rgba(225, 246, 252, 0.5);
        }
        td{
            line-height: 50px;
            border-right: 1px solid #cccccc;
           
        } 
    }
}
  .fade-enter-active,.fade-leave-active {
        transition: all .5s;
        
    }
    .fade-enter,.fade-leave-to {
        opacity: 0;
        height: 0;
        // transform: translate(20px)
    }
</style>
